<template lang="html">
  <view class="bingding_cp">
    <view class="father_accounts">
      <input class="accounts" v-model="regist_account" maxlength="11" placeholder="手机号" />
      <image class="acc_icon" :mode="scaleToFill" src="/static/img/ic_login_icon_yhm.png"></image>
    </view>

    <view class="father_accounts">
      <input class="accounts" v-model="password" minlength="6" placeholder="密码" />
      <image class="acc_icon" :mode="scaleToFill" src="/static/img/ic_login_icon_yhm.png"></image>
    </view>

    <view class="father_accounts marginmini">
      <input class="accounts_verification" v-model="regist_verification" maxlength="6" placeholder="验证码" />
      <image class="acc_icon" :mode="aspectFit" src="/static/img/ic_login_icon_passwords.png"></image>
      <button :class="canSend ? 'btn_verification_can_send' : 'btn_verification'" :disabled="!canSend" @click="toSendMsg">{{sendText}}</button>
    </view>
    <view :class="canNext? 'btnCanNext' : 'btnNext'"  @click="toNext">下一步</view>
    <view>
    </view>
  </view>
</template>

<script>
import api from '@/utils/api'
export default {
  data () {
    return {
      canNext: false,
      canSend: false,
      regist_account: '',
      regist_verification: '',
      time: 60,
      sendText: '获取验证码',
      password: '',
      unionid: '',
      openid: ''
    }
  },
  watch: {
    regist_account (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal !== '' && this.regist_verification.length === 6) {
        this.canNext = true
      } else {
        this.canNext = false
      }
      if (curVal !== '') {
        this.canSend = true
      } else {
        this.canSend = false
      }
    },
    regist_verification (curVal, oldVal) {
      console.log(curVal, oldVal)
      if (curVal.length === 6 && this.regist_account !== '') {
        this.canNext = true
      } else {
        this.canNext = false
      }
    }
  },
  onLoad () {
    this.openid = this.$root.$mp.query.openid
    this.unionid = this.$root.$mp.query.unionid
    console.log(this.openid)
    console.log(this.unionid)
  },
  methods: {
    toSendMsg () {
      if (!/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(this.regist_account) || this.regist_account.length < 11) {
        wx.showToast({
          title: '手机号有误',
          icon: 'none'
        })
      } else {
        this.toGetCode(this.regist_account, 2, '')
      }
    },
    // 发送短信验证码
    toGetCode (cellphone, type, code) {
      var _this = this
      const opsentmsgcode = api.opsentmsgcode(cellphone, type, code)
      opsentmsgcode.then(d => {
        if (d.code === 200) {
          wx.showToast({
            title: '发送成功',
            icon: 'success'
          })
          _this.canSend = false
          _this.time = 60
          let interval = setInterval(function () {
            if ((_this.time--) <= 0) {
              clearInterval(interval)
              _this.canSend = true
              _this.sendText = '获取验证码'
            } else {
              _this.canSend = false
              _this.sendText = _this.time + 'S'
            }
          }, 1000)
        }
      })
      .catch((e) => {
        console.log(e)
      })
    },
    // 注册
    toNext () {
      if (this.canNext) {
        let param = {}
        let that = this
        param['cellphone'] = this.regist_account
        param['password'] = this.password
        param['msg_code'] = this.regist_verification
        param['unionid'] = this.unionid
        param['openid'] = this.openid
        const opBindCellphoneXcx = api.opBindCellphoneXcx(param)
        opBindCellphoneXcx.then(d => {
          if (d.code === 200) {
            that.$router.push({ path: '/pages/home/main', isTab: true })
          }
        })
        .catch((e) => {
          console.log(e)
        })
      }
    }
  }
}
</script>

<style lang="css">
  @import './bindingcellphone.css';
</style>
